<template>
  <div class="game-info">
    <div class="score">Score: {{ score }}</div>
    <div class="level">Level: {{ level }}</div>
    <div class="lines">Lines: {{ lines }}</div>
    <div class="controls">
      <button @click="$emit('togglePause')" class="control-btn">
        {{ isPaused ? 'Resume' : 'Pause' }}
      </button>
      <button @click="$emit('restart')" class="control-btn">New Game</button>
    </div>
    <div class="difficulty">
      <label>Difficulty:</label>
      <select :value="difficulty" @change="$emit('setDifficulty', $event.target.value)" class="difficulty-select">
        <option value="easy">Easy</option>
        <option value="normal">Normal</option>
        <option value="hard">Hard</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  score: number;
  level: number;
  lines: number;
  isPaused: boolean;
  difficulty: string;
}>();

defineEmits<{
  (e: 'restart'): void;
  (e: 'togglePause'): void;
  (e: 'setDifficulty', difficulty: string): void;
}>();
</script>

<script lang="ts">
export default {
  name: 'GameInfo'
}
</script>

<style scoped>
.game-info {
  padding: 20px;
  background: #222;
  border-radius: 8px;
  color: white;
  margin-left: 20px;
}

.score, .level, .lines {
  margin: 10px 0;
  font-size: 1.2em;
}

.controls {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.control-btn {
  padding: 10px 20px;
  background: #00f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #111;
  font-weight: bold;
  width: 100%;
}

.control-btn:hover {
  background: #00ffff;
}

.difficulty {
  margin-top: 20px;
}

.difficulty label {
  display: block;
  margin-bottom: 5px;
}

.difficulty-select {
  width: 100%;
  padding: 8px;
  background: #333;
  color: white;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
}

.difficulty-select:hover {
  background: #444;
}
</style>